<template>
  <!-- hidden 隐藏字段 -->
  <input type="hidden" v-if="widget.type=='hidden'" :value="value" @update:value="$emit('update:value', $event)"/>
  <!-- input/password/mention(提及@谁) -->
  <template v-if="widget.type == 'input' || widget.type == 'password'">
    <mention
      v-if="widget.type == 'input' && widget.mention == true"
      :widget="widget"
      :value="value"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      @update:value="$emit('update:value', $event)"
    />
    <n-input
      v-else
      clearable
      :pair="widget.pair ? true : false"
      :separator="widget.pair ? '~' : undefined"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      :size="widget.size ? widget.size : 'medium'"
      :value="value"
      @update:value="$emit('update:value', $event)"
      :show-password-toggle="widget.type == 'password'"
      :type="widget.type == 'password' ? 'password' : 'text'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    >
      <template v-if="widget.prefix" #prefix>
        <n-icon
          :style="inputIconSize"
          :onClick="widget.prefixClick ? widget.prefixClick : undefined"
        >
          <svg-icon :icon="widget.prefix" />
        </n-icon>
      </template>
      <template v-if="widget.suffix" #suffix>
        <svg-icon
          :style="inputIconSize"
          :onClick="widget.suffixClick ? widget.suffixClick : undefined"
          :icon="widget.suffix"
        />
      </template>
    </n-input>
  </template>
  <!-- textarea/mention(提及@谁) -->
  <template v-if="widget.type == 'text'">
    <mention
      v-if="widget.mention == true"
      :widget="widget"
      :value="value"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      @update:value="$emit('update:value', $event)"
    />
    <n-input
      v-else
      clearable
      :pair="widget.pair ? true : false"
      :separator="widget.pair ? '-' : undefined"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      :size="widget.size ? widget.size : 'medium'"
      :value="value"
      @update:value="$emit('update:value', $event)"
      type="textarea"
      :rows="widget.rows || 6"
      :show-count="widget.showCount || true"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    >
    </n-input>
  </template>
  <!-- number -->
  <template v-if="widget.type == 'number'">
    <n-slider
      v-if="widget.pair"
      tooltip
      :value="value"
      :max="widget.max ? widget.max : 100"
      :min="widget.min ? widget.max : 0"
      :step="widget.step ? widget.max : 1"
      range
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
    <n-input-number
      v-else
      :clearable="widget.clear ? widget.clear : false"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      :size="widget.size ? widget.size : 'medium'"
      :value="value"
      @update:value="$emit('update:value', $event)"
      :step="widget.step ? widget.step : 1"
      :max="widget.max ? widget.max : undefined"
      :min="widget.min ? widget.min : undefined"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    >
      <template v-if="widget.prefix" #prefix>{{ widget.prefix }}</template>
      <template v-if="widget.suffix" #suffix>{{ widget.suffix }}</template>
    </n-input-number>
  </template>
  <!-- radio -->
  <template v-if="widget.type == 'radio'">
    <n-radio-group
      :value="value"
      :name="uuid.v4()"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    >
      <n-space>
        <n-radio
          v-for="item in widget.options"
          :key="item.value"
          :value="item.value"
          :disabled="item.disabled == true ? true : false"
          :readonly="item.readonly == true ? true : false"
          >{{ item.label }}</n-radio
        >
      </n-space>
    </n-radio-group>
  </template>
  <!-- checkbox -->
  <template v-if="widget.type == 'checkbox'">
    <n-checkbox-group
      :value="value"
      :name="uuid.v4()"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
    >
      <n-space item-style="display: flex;">
        <n-checkbox
          v-for="item in widget.options"
          :key="item.value"
          :value="item.value"
          :label="item.label"
          :disabled="item.disabled == true ? true : false"
          :readonly="item.readonly == true ? true : false"
        ></n-checkbox>
      </n-space>
    </n-checkbox-group>
  </template>
  <!-- auto complete 自动填充 -->
  <template v-if="widget.type == 'auto'">
    <n-auto-complete
      clearable
      :options="widget.options"
      :placeholder="widget.placeholder ? widget.placeholder : '请输入'"
      :value="value"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
  </template>
  <!-- cascader 级联选择 -->
  <template v-if="widget.type == 'cascader'">
    <n-cascader
      clearable
      filterable
      :show-path="false"
      :multiple="widget.multiple ? true : false"
      expand-trigger="hover"
      :options="widget.options"
      :placeholder="widget.placeholder ? widget.placeholder : '请选择'"
      :value="value"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
  </template>
  <!-- select  -->
  <template v-if="widget.type == 'select'">
    <n-select
      clearable
      filterable
      :show-path="false"
      :multiple="widget.multiple == true ? true : false"
      expand-trigger="hover"
      :options="widget.options"
      :placeholder="widget.placeholder ? widget.placeholder : '请选择'"
      :value="value"
      :tag="widget.tag == true ? true : false"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
  </template>
  <!-- slider 滑动选择器 适用于数字区间  -->
  <template v-if="widget.type == 'slider'">
    <n-slider
      tooltip
      :value="value"
      :max="widget.max ? widget.max : 100"
      :min="widget.min ? widget.max : 0"
      :step="widget.step ? widget.max : 1"
      :range="widget.pair == true ? true : false"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
  </template>
  <!-- rate 评分 -->
  <template v-if="widget.type == 'rate'">
    <n-rate
      tooltip
      :value="value"
      allow-half
      :count="widget.max ? widget.max : 5"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    />
  </template>
  <!-- switch 开关 -->
  <template v-if="widget.type == 'switch'">
    <n-switch
      :value="value"
      @update:value="$emit('update:value', $event)"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
    >
      <template v-if="widget.checked" #checked>{{ widget.checked }}</template>
      <template v-if="widget.unchecked" #unchecked>{{
        widget.unchecked
      }}</template>
    </n-switch>
  </template>
  <!-- transfer 穿梭框 -->
  <template v-if="widget.type == 'transfer'">
    <n-transfer
      :value="value"
      @update:value="$emit('update:value', $event)"
      :options="widget.options"
      :size="widget.size ? widget.size : 'medium'"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      filterable
    />
  </template>
  <!-- dynamic-tags 动态标签 -->
  <template v-if="widget.type == 'tag'">
    <n-dynamic-tags
      :value="value"
      @update:value="$emit('update:value', $event)"
      :max="widget.max ? widget.max : undefined"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      style="background-color:rgba(255,255,255,0.1)"
    >
    </n-dynamic-tags>
  </template>
  <!-- color 颜色选择器 -->
  <template v-if="widget.type == 'color'">
    <n-color-picker
      :value="value"
      @update:value="$emit('update:value', $event)"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      style="background-color:rgba(255,255,255,0.1)"
    />
  </template>
  <!-- date 日期选择器 -->
  <template v-if="widget.type == 'date'">
    <n-date-picker
      :value="value"
      :type="widget.pair == true ? 'daterange' : 'date'"
      @update:value="$emit('update:value', $event)"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      clearable
    />
  </template>
  <!-- datetime 日期时间选择器 -->
  <template v-if="widget.type == 'datetime'">
    <n-date-picker
      :value="value"
      :type="widget.pair == true ? 'datetimerange' : 'datetime'"
      @update:value="$emit('update:value', $event)"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      clearable
    />
  </template>
  <!-- time 时间选择器 -->
  <template v-if="widget.type == 'time'">
    <n-time-picker
      :value="value"
      @update:value="$emit('update:value', $event)"
      :disabled="widget.disabled == true ? true : false"
      :readonly="widget.readonly == true ? true : false"
      :format="widget.format ? widget.format : 'HH:mm'"
      clearable
    />
  </template>
  
  <!-- 字典组件配置组件 -->
  <template v-if="widget.type == 'option'">
    <dict-option
      :type="widget.tree == true ? 'tree' : 'list'"
      :value="value"
      @update:value="$emit('update:value', $event)"
    />
  </template>
  <!-- upload -->
  <n-upload
    v-if="widget.type == 'upload'"
    :accept="widget.accept ? widget.accept : undefined"
    :action="widget.action ? widget.action : undefined"
    :multiple="widget.multiple == true ? true : false"
    :disabled="widget.disabled == true ? true : false"
    :readonly="widget.readonly == true ? true : false"
    :file-list="fileList"
    style="background-color:rgba(255,255,255,0.1)"
    :headers="widget.headers ? widget.headers : undefined"
    :data="widget.data ? widget.data : undefined"
    @change="change"
  >
    <div style="padding:5px;">
      <n-upload-dragger v-if="widget.dragger == true">
        <div style="margin-bottom: 12px;">
          <n-icon size="48" :depth="3">
            <archive-icon />
          </n-icon>
        </div>
        <n-text style="font-size: 16px;">点击或者拖动文件到该区域来上传</n-text>
        <n-p depth="3" style="margin: 8px 0 0 0;"
          >请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p
        >
      </n-upload-dragger>
      <n-button size="small" v-else>上传文件</n-button>
    </div>
  </n-upload>
</template>

<script>
import { ref, computed} from "vue";
import Mention from "./Mention.vue";
import NumberPair from "./NumberPair.vue";
import { uuid } from "vue-uuid";
import TreeSelect from "./TreeSelect.vue";
import SvgIcon from "./SvgIcon.vue";
import DictOption from "./DictOption.vue";
export default {
  name: "InputItem",
  components: { NumberPair, Mention, TreeSelect, SvgIcon, DictOption },
  props: ["value", "widget"],
  setup(props, { emit }) {
    //组件前后的图表设置大小
    const inputIconSize = computed(() => {
      let size = {};
      if (props.widget.hasOwnProperty("size")) {
        switch (props.widget.size) {
          case "large":
            size = {
              width: "24px",
              height: "24px",
            };
          case "small":
            size = {
              width: "16px",
              height: "16px",
            };
          default:
            size = {
              width: "20px",
              height: "20px",
            };
        }
      } else {
        size = {
          width: "20px",
          height: "20px",
        };
      }
      if (props.widget.hasOwnProperty("prefix")) {
        if (props.widget.prefix.hasOwnProperty("icon")) {
          if (props.widget.prefix.icon.hasOwnProperty("click")) {
            size.cursor = "pointer";
          }
        }
      }
      return size;
    });
    let result = {
      inputIconSize,
    };
    result.fileList = ref(props.value || []);
    result.change = (opt) => {
      result.fileList.value = opt.fileList;
      emit("update:value", opt.fileList);
    };
    return { ...result, uuid };
  },
};
</script>

<style scoped></style>
